<template>
	<view>
		<!-- 顶部导航栏 -->
		<view class="header">
			<x-status-bar></x-status-bar>
			<view class="flex-center-between header-navbar">
				<view class="flex-center-between" style="width: calc(750rpx - 196rpx)">
					<view v-for="(item, index) in navs" :key="index"
						:class="[index === navIndex ? 'u-f-40 u-lh-56 font-medio' : 'u-f-32 u-lh-44']"
						@click="navIndex = index">{{ lang_shop[item.labelKey] }}</view>
				</view>
				<image src="@/static/image/common/edit_white.png" style="width: 40rpx; height: 40rpx;"
					class="clear-flex" @click="tabAction"></image>
			</view>

			<!-- 顶部背景 -->
			<view class="top-bg"></view>
		</view>

		<!-- container -->
		<view class="container">
			<swiper style="height: calc(100vh - 98rpx - var(--status-bar-height));" :current="navIndex"
				@change="navIndex = $event.detail.current">
				<swiper-item>
					<scroll-view scroll-y style="height: 100%;">
						<component is="Info"></component>
					</scroll-view>
				</swiper-item>
				<swiper-item>
					<view class="info-mask">
						<view class="info-mask-box"></view>
					</view>
					<view style="height: 40rpx;"></view>
					<service-list ref="mescrollItem" :i="1" :index="navIndex" @delete="deleteShow" @change="changeAction"></service-list>
				</swiper-item>
				<swiper-item>
					<view class="info-mask">
						<view class="info-mask-box"></view>
					</view>
					<view style="height: 40rpx;"></view>
					<staff-list ref="mescrollItem" :i="2" :index="navIndex" @delete="deleteShow" @change="changeAction"></staff-list>
				</swiper-item>
			</swiper>
		</view>

		<u-modal v-model="visible" :show-title="false" show-cancel-button :content="modalContent"
			:cancel-text="lang_common.cancel" :confirm-text="lang_common.done" :confirm-color="'#FD1E43'"
			@confirm="comfirmAction" @cancel="visible = false" z-index="9999999">
		</u-modal>
		
		<!-- 未开启定位提示 -->
		<permission-unAuthTips v-model="settingValue"></permission-unAuthTips>
	</view>
</template>

<script>
	import { merchantDeleteStaff } from '@/api/merchant/merchant.js'
	import Info from './components/info.vue'
	import serviceList from './components/service-list.vue'
	import staffList from './components/staff-list.vue'

	export default {
		components: {
			Info,
			serviceList,
			staffList
		},
		data() {
			return {
				navs: [
					{ label: '商家管理', labelKey: 'shopManager', key: '' },
					{ label: '服务列表', labelKey: 'serviceList', key: '' },
					{ label: '人员列表', labelKey: 'staffList', key: '' }
				],
				navIndex: 0,
				
				visible: false,
				modalContent: '',
				itemObj: {},
				settingValue: ''
			}
		},
		created() {
			this.serviceList = []
		},
		async onLoad() {
			let locationPermission = await this.authLocation(1)
			if (typeof locationPermission === 'number' || !locationPermission) {
				this.settingValue = 'location'
			}
			let timer = setTimeout(() => {
				clearTimeout(timer)
				this.$store.commit('UPDATE_TABBAR_VISIBLE_TYPE', 'shop')
			}, 100)
		},
		methods: {
			tabAction() {
				let url = '/pages/common/saveShop/saveShop?type=editShop'
				if (this.navIndex === 1) {
					url = '/pages/shop/staff/service/service'
				} else if (this.navIndex === 2) {
					url = '/pages/shop/staff/info/info'
				}
				this.jumpUrl(url)
			},
			// 删除前询问
			deleteShow(item) {
				this.modalContent = this.lang_shop[`delete${this.navIndex === 1 ? 'Service' : 'Staff' }Tips`]
				this.itemObj = {
					...item
				}
				this.visible = true
			},
			comfirmAction() {
				if (this.navIndex === 1) {
					
				} else {
					merchantDeleteStaff({ staffId: this.itemObj.id }).then(() => {
						uni.$emit('update-shop-staff-list')
					})
				}
			},
			changeAction(item) {
				this.itemObj = {
					...item
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.info {
		position: relative;
		z-index: 0;
		&-mask {
			position: absolute;
			top: -10rpx;
			width: 100vw;
			height: 80rpx;
			background-color: #fc5457;
			
			&-box {
				position: absolute;
				top: 20rpx;
				width: 100vw;
				height: 80rpx;
				background-color: #FFFFFF;
				border-top-left-radius: 40rpx;
				border-top-right-radius: 40rpx;
				overflow: hidden;
			}
		}
	}
	.header {
		color: #FFFFFF;
		background-color: rgba(0, 0, 0, 0);
	}

	.container {
		width: 100vw;
		background-color: #FFFFFF;
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;

		&-header {
			width: 100vw;
			height: 20rpx;
			background-color: #FFFFFF;
			border-top-left-radius: 40rpx;
			border-top-right-radius: 40rpx;
		}
	}

	.top-bg {
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		width: 100vw;
		height: calc(var(--status-bar-height) + 20rpx + 80rpx);
		background: linear-gradient(to bottom, #FC2642 0%, #fc5457 100%);
	}
</style>
